<template>
  <div>
    <new-search-bar searchFixed="true" @search="startSearch" @cancel="startSearch"></new-search-bar>
    <div class="c-ph24" :class="dataList.length >= 10 ? 'c-pb80' : ''">
      <div class="c-flex-row c-aligni-center c-justify-sb c-pv30" :class="ind != dataList.length - 1 ? 'c-bd-b1' : ''" v-for="(it, ind) in dataList" :key="ind" @click="clickGoDetail(it.caId)">
        <div class="c-lh44 c-fc-xblack c-fs28 c-text-ellipsis2 c-w0 c-flex-grow1">{{it.title}}</div>
        <div class="c-lh36 c-fs24 c-fc-gray c-ml30" v-if="it.isShowTime">{{getMonthDay(it.issuedAt)}}</div>
      </div>
      <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (dataList && dataList.length > 0)" :noData="dataList.length == 0" :noDataText="'暂无内容'"></loading-status-tem>
    </div>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import { utilJs } from "@/utils/common.js"
export default {
  name: "articleList",
  components: {
    loadingStatusTem,
    newSearchBar,
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      dataList: [],
      is_page: false,
      page: 1,
      limit: 10,
      searchText: '',
      isLoading: false,
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    this.isLoading = false;
    setDocumentTitle("文章列表");
    if (utilJs.checkNeedInitData(this.dataList)) {
      this.initData()
    }
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  computed: {
    getMonthDay() {
      return function (date) {
        let now = new Date();
        let time = new Date(date.replace(/-/g, "/"));
        return `${time.getFullYear() != now.getFullYear() ? time.getFullYear() + "/" : ""}${time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1}/${time.getDate() < 10 ? '0' + time.getDate() : time.getDate()}`
      }
    },
  },
  methods: {
    initData() {
      this.page = 1;
      this.is_page = false;
      this.searchText = '';
      this.dataList = [];
      this.getMore();
    },
    startSearch(e) {
      this.page = 1;
      this.dataList = [];
      this.searchText = e.searchValue;
      utilJs.toPageScrollTop();
      this.getMore();
    },
    clickGoDetail(caId) {
      this.$routerGo(this, "push", { path: '/homePage/article/articleDetail?caId=' + caId});
    },
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(`${global.apiurl}companyArticle/getArticleList?name=${this.searchText}&page=${this.page}&limit=${this.limit}`, res => {
          this.isLoading = false;
          this.dataList = this.dataList.concat(res.data);
          this.page = res.data && (res.data.length >= this.limit) ? (this.page + 1) : this.page;//res.current_page < res.last_page ? (this.page + 1) : this.page;
          this.is_page = res.data && (res.data.length >= this.limit) ? true : false;//res.current_page < res.last_page ? true : false;
        }, failRes => {
          this.isLoading = false;
        });
      }
    },
    //分享
    wechatShare: function () {
      let title = "文章列表";
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "文章列表";
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>